.single-output{
	box-shadow: 1px 2px 10px #000000;
	color: white;
    margin: 25px;
    font-size: 14px;
    background-color: #191c1e;
	
}
.command-header{
	height: 55px;
	background-color: #191c1e;
	border: 0.25px solid #191c1e;
	text-align: left;
	vertical-align: middle;
	padding-left: 30px;
	font-size: 16px;
	font-weight: normal;
	
}
.command-header > *{
	vertical-align: middle;
	display: inline-block;
	color: white;
}
.command-header > .command-display{
	width: calc(100% - 125px);
}

.command-action {
	width: 20px;
    height: auto;
}

.loading{	
	width: 20px;
	height: 20px;
	margin-left:2px;
	margin-right:20px;	
	border: 5px solid #fff;
	border-right-color: transparent;
	border-radius: 50%;
	box-shadow: 0 0 10px 2px #eee;
	animation: spin 1s linear infinite;
	-webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    -ms-animation: spin 1s linear infinite;
    -o-animation: spin 1s linear infinite;
}
@keyframes spin
{
	from { transform: rotate(0deg);   opacity: 0.2; }
	50%  { transform: rotate(180deg); opacity: 1.0; }
	to   { transform: rotate(360deg); opacity: 0.2; }
}
.loaded{
	width: 24px;
	height: 24px;
	margin-left:2px;
	margin-right: 17px;
	background-size: cover;               
    background-repeat: no-repeat;
    background-position: center center;
    animation: spinEnd 2s linear 1;
	-webkit-animation: spinEnd 2s linear 1;
    -moz-animation: spinEnd 2s linear 1;
    -ms-animation: spinEnd 2s linear 1;
    -o-animation: spinEnd 2s linear 1;
}
@keyframes spinEnd
{
	from { transform: rotate(0deg);  width: 25 ; height: 25; background-image: url("../img/check.png")}
	17%  { transform: rotate(180deg); width: 20 ; height: 20}
	33%  { transform: rotate(360deg); width: 25 ; height: 25}
	50%  { transform: rotate(360deg); width: 20 ; height: 20}
	to   { transform: rotate(360deg); opacity: 0.1; width: 25 ; height: 25; background-image: url("../img/check.png")}
}
.command-action img:active {
    padding-top: 5px;
}


.command-nav-bar{
    width: 60px;
    background-color: #3e4244;
    border: 0.25px solid #393939;
    padding:0px;
    vertical-align:top;

}
.command-target{
	height: 40px;
	background-color: #4d5254;
	border: 0.25px solid #3e4244;
	border-left: none;
	
}
.result{
	background-color: #191c1e;
	border: 0.25px solid #191c1e;
	padding: 0;
	
}
.result .open{
	color: limegreen;
    unicode-bidi: embed;
    font-family: monospace;
    font-weight: 900;
}
.result .closed{
	color: #ff4d4d;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
    font-weight: 900;
    
}
.result .filtered{
	color: orange;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
    font-weight: 900;
}
.result pre{
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.command-displaying{
	height: 40px;
	background-color: #292c2d;
	border: 0.25px solid #191c1e;
	border-left: none;	
}
.output-table{
	border: none;
	border-spacing: 0;
}
.console-output{
	margin:20px;	
}
.command-sidebar-button{
    display: inline-block;
    width: 60px;
    font-size: 10px;
    font-weight: bold;
    height:90px;
    color: #FFFFFF;
}

.selected{
    background-color:#252526;
}
.command-sidebar-button:hover{
    background-color:#111111;
}
.command-sidebar-button  img
{
    width:40px; 
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.hidden{
	display: none; 
}

.svg-content {
    display: inline-block;
    overflow: hidden;
}

.link {
  fill: none;
  stroke: #999;
  stroke-width: 1.5px;
}
		
.node circle {
  fill: #ccc;
  stroke: #fff;
  stroke-width: 1.5px;
}
.node .up{
  fill: #72d66f;  
}
.node .you{
  fill: #3465a4;

}
.node .down{
  fill: #ef2929;
}

svg text {
  font: 10px sans-serif;
  fill: #FFF;
  pointer-events: none;
}
svg .tip{
	fill: #f2f2f2;
}
svg .tipHidden{
	visibility: hidden;
}
svg .tip text {
  font: 10px sans-serif;
  fill: #000;
  pointer-events: none;
}
svg .tipTitle{
	font-weight: bold;	
}
svg .tip .open{
  fill: #4e9a06;  
}

svg .tip .closed{
  fill: #a40000;
}
svg .tip .filtered{
  fill: #ce5c00;
}
